<template>
    <div>
        <div id="separator">Order Detail</div>
        <div class="order">
            <div style="height: 60px"><div class="button" style="float: left; margin-left: 50px" @click="$router.back(1)">&lt;Back</div></div>
            <div class="title small">Bill Information</div>
            <div class="inputLine">
                <div class="label">First name:</div>
                <input type="text" disabled name="creditCard" v-model="order.billToFirstName" />
            </div>
            <div class="inputLine">
                <div class="label">Last name:</div>
                <input type="text" disabled name="creditCard" v-model="order.billToLastName" />
            </div>
            <div class="inputLine">
                <div class="label">Address 1:</div>
                <input type="text" disabled name="creditCard" v-model="order.billAddress1" />
            </div>
            <div class="inputLine">
                <div class="label">Address 2:</div>
                <input type="text" disabled name="creditCard" v-model="order.billAddress2" />
            </div>
            <div class="inputLine">
                <div class="label">City:</div>
                <input type="text" disabled name="creditCard" v-model="order.billCity" />
            </div>
            <div class="inputLine">
                <div class="label">State:</div>
                <input type="text" disabled name="creditCard" v-model="order.billState" />
            </div>
            <div class="inputLine">
                <div class="label">Zip:</div>
                <input type="text" disabled name="creditCard" v-model="order.billZip" />
            </div>
            <div class="inputLine">
                <div class="label">Country:</div>
                <input type="text" disabled name="creditCard" v-model="order.billCountry" />
            </div>

            <div class="title small">Ship Information</div>
            <div class="inputLine">
                <div class="label">First name:</div>
                <input type="text" disabled name="creditCard" v-model="order.shipToFirstName" />
            </div>
            <div class="inputLine">
                <div class="label">Last name:</div>
                <input type="text" disabled name="creditCard" v-model="order.shipToLastName" />
            </div>
            <div class="inputLine">
                <div class="label">Address 1:</div>
                <input type="text" disabled name="creditCard" v-model="order.shipAddress1" />
            </div>
            <div class="inputLine">
                <div class="label">Address 2:</div>
                <input type="text" disabled name="creditCard" v-model="order.shipAddress2" />
            </div>
            <div class="inputLine">
                <div class="label">City:</div>
                <input type="text" disabled name="creditCard" v-model="order.shipCity" />
            </div>
            <div class="inputLine">
                <div class="label">State:</div>
                <input type="text" disabled name="creditCard" v-model="order.shipState" />
            </div>
            <div class="inputLine">
                <div class="label">Zip:</div>
                <input type="text" disabled name="creditCard" v-model="order.shipZip" />
            </div>
            <div class="inputLine">
                <div class="label">Country:</div>
                <input type="text" disabled name="creditCard" v-model="order.shipCountry" />
            </div>

            <div class="title small">Items</div>
            <div v-for="(item, index) of order.lineItems" :key="`item-${index}`" class="itemLine">
                <div class="title item">{{ item.itemId }}</div>
                <div class="title item">￥{{ item.unitPrice.toFixed(2) }}</div>
                <div class="title item" style="margin-left: 10px">&times;{{ item.quantity }}</div>
                <div class="title item" style="float:right; margin-right: 50px">￥{{ getItemTotal(item).toFixed(2) }}</div>
            </div>
            <div id="totalPrice">
                <div id="subTotal"><span>￥{{ getTotal().toFixed(2) }}</span></div>
                <div id="explain">Sub Total:</div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
    data() {
        return {
            order: {
                orderId: this.$route.params.orderId,
                username: '',
                billAddress1: '',
                billAddress2: '',
                billCity: '',
                billState: '',
                billZip: '',
                billCountry: '',
                courier: 'CSU mail',
                billToFirstName: '',
                billToLastName: '',
                creditCard: 'wx20210404',
                expiryDate: '05/05',
                cardType: 'wechat pay',
                locale: 'Chang Sha',
                shipAddress1: '',
                shipAddress2: '',
                shipCity: '',
                shipState: '',
                shipZip: '',
                shipCountry: '',
                shipToFirstName: '',
                shipToLastName: '',
                lineItems: []
            }
        }
    },
    methods: {
        ...mapActions({
            getOrderByOrderId: 'order/getOrderByOrderId'
        }),
        getTotal() {
            let total = 0
            for(let item of this.order.lineItems) {
                total += this.getItemTotal(item)
            }
            return total
        },
        getItemTotal(item) {
            if(item === null || item === undefined) {
                return 0.00
            }
            return item.unitPrice * item.quantity
        }
    },
    mounted() {
        let orderId = this.$route.params.orderId
        this.getOrderByOrderId(orderId).then((res) => {
            this.order = res
        }, (error) => {
            console.log(error)
        })
    }
}
</script>

<style lang="scss" scoped>
#separator {
    border: none;
    border-bottom: 3px solid #364462;
    text-align: center;
    overflow: hidden;
    width: 25%;
    margin: 35px auto;
    font-size: 2em;
    color: #364462;
}

.order {
    width: 55%;
    margin: 40px auto 60px auto;
    color: #833d1e;
    border-radius: 3px;
    background-color: #efe7db;
    box-shadow: 2px 2px 15px #78a686;
    padding: 1px;
    overflow: hidden;
    min-height: 300px;
    position: relative;
    padding-bottom: 70px;
    .showWindow {
        animation: show 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
    }
    .inputLine
    {
        width: 100%;
        height: 50px;
        overflow: hidden;
        margin-top: 25px;
        margin-left: 0;
        margin-right: 0;
    }
    .inputLine>.label
    {
        float: left;
        position: relative;
        height: 26px;
        top: 24px;
        font-size: 1.3em;
        width: 16%;
        margin: 0 0 0 20%;
    }

    .inputLine>input
    {
        outline: none;
        width: 36%;
        color: #833d1e;
        height: 30px;
        position: relative;
        border: none;
        font-size: 1.2rem;
        top: 18px;
        float: left;
        background: transparent;
        &.editLine {
            top: 15px;
            font-size: 1.1rem;
            border-bottom: 3px solid #833d1e;
        }
    }
    #editBtnLine
    {
        width: 100%;
        height: 50px;
        overflow: hidden;
        position: relative;
        margin-top: 2%;
    }

    #editBtn
    {
        position: absolute;
        right: 5%;
        width: 10%;
        text-align: center;
        height: 40px;
        border: 3px solid #833d1e;
        font-size: 1.1em;
        border-radius: 5px;
        line-height: 40px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }

    #editBtn:hover
    {
        color: #efe7db;
        background-color: #833d1e;
        user-select: none;
    }

    .title{
        border: none;
        text-align: center;
        overflow: hidden;
        margin: 10px auto 0 auto;
        font-size: 2em;
        color: #833d1e;
        &.small {
            font-size: 1.3rem;
        }
        &.item {
            font-size: 1.3rem;
            margin: 0 0 0 25px;
            line-height: 70px;
            float: left;
        }
    }
    .itemLine
    {
        width: 75%;
        height: 70px;
        overflow: hidden;
        margin: 0 auto;
        border-bottom: 3px solid #833d1e;
    }
    .button
    {
        cursor: pointer;
        text-align: center;
        line-height: 35px;
        transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        border: 3px solid #507e64;
        color: #507e64;
        width: 100px;
        height: 40px;
        margin: 14px 20px 0 0;
        border-radius: 8px;
        font-size: 1.1em;
        float: right;
    }

    .button:hover
    {
        background-color: #507e64;
        color: #efe7db;
    }
    #totalPrice
    {
        font-size: 1.8em;
        font-weight: bold;
        overflow: hidden;
        position: relative;
        margin: 10px 70px;
    }
    #totalPrice #explain
    {
        float: right;
        margin-right: 15px;
    }
    #totalPrice #subTotal
    {
        margin-left: 10px;
        float: right;
        margin-right: 5%;
    }
}
</style>